{% extends 'account/base.html' %}

{% block title %}
    <title>这里是登录</title>
{% endblock %}

<!--主要内容块-->
{% block main %}
    <main>
        <div class="jq22-container" style="padding-top:100px">
            <div class="login-wrap">
                {#                <div class="col-md-6 offset-md-3 px-xl-5 ">#}
                {#                    <div class="card rounded-0 px-3 px-lg-4">#}
                {#                        <div class="card-header text-center bg-white py-2">#}
                {#                            <h3 class="my-1 text-info"></h3>#}
                {#                        </div>#}
                <div class="login-html">
                    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1"
                                                                                             class="tab">登录</label>
                    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab"></label>
                    <div class="login-form">
                        <form>
                            {% csrf_token %}
                            {#                                {% if error %}#}
                            {#                                    <div class="alert alert-block alert-danger">#}
                            {#                                        <ul>#}
                            {#                                            <li>您提供的用户名或密码不正确</li>#}
                            {#                                        </ul>#}
                            {#                                    </div>#}
                            {#                                {% endif %}#}
                            {#                                {% if inactive %}#}
                            {#                                    <div class="alert alert-block alert-danger">#}
                            {#                                        <ul>#}
                            {#                                            <li>您的账号已被封禁。</li>#}
                            {#                                        </ul>#}
                            {#                                    </div>#}
                            {#                                {% endif %}#}
                            <!--下面用户名-->
                            <div class="sign-in-htm">
                                <div id="div_id_login" class="group">
                                    <label for="id_login" class="label" style="color: white;font-size:15px">
                                        账号<span class="asteriskField">*</span>
                                    </label>
                                    <div class="">
                                        <input type="text" id="user" placeholder="用户名"
                                               class="input">
                                    </div>
                                </div>
                                <!--下面是密码-->
                                <div id="div_id_password" class="group">
                                    <label for="id_password" class="label" style="color: white;font-size:15px">
                                        密码<span class="asteriskField">*</span>
                                    </label>
                                    <div class=""><input type="password" id="pwd" placeholder="密码"
                                                         class="input"
                                    ></div>
                                </div>

                                <!--下面是验证码-->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="valid_code" style="color: white;font-size:15px ">验证码<span
                                                    class="asteriskField">*</span></label>
                                            <input type="text" class="form-control" id="valid_code" placeholder="验证码">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <img id="valid_img" height="70" width="200"
                                             src="{% url 'accounts:get_valid_img' %}" alt="">
                                    </div>
                                </div>
                                <div class="group">
                                    <div class="container">
                                        <div id="captcha" style="position: relative" data-type="password"></div>
                                        <div id="msg"></div>
                                    </div>
                                </div>


                                <!--下面是打钩记住密码-->
                                {#                                <div class="group">#}
                                {#                                    <div id="div_id_remember" class="checkbox"><label for="id_remember" class=""> <input#}
                                {#                                            type="checkbox" name="remember" class="icon" id="id_remember"/>#}
                                {#                                        记住我#}
                                {#                                    </label></div>#}
                                {#                                </div>#}
                                <div class="group">
                                    <input id="check" type="checkbox" class="check" checked>
                                    <label for="check"><span class="icon"></span> 保持登录</label>
                                </div>

                                {#                                <input type="hidden" name="next" value="{{ next_to }}"/>#}

                                <div class="group">
                                    <input type="button" class="button" id="button1" value="登录">
                                </div>
                                <div class="foot-lnk">
                                    <a href="{% url 'accounts:change_pwd' %}">忘记密码了？|</a>
                                    <a href="{% url 'accounts:register' %}">去注册账号</a>
                                    {#                                <input type="button" value="登录1" class="btn btn-primary pull-right login_btn">#}
                                </div>
                                {#                                                                <input type="button" value="登录"#}
                                {#                                                                       class="button login_btn">#}
                                {##}
                                {#                                                                </input>#}
                                <span class="error"> </span>
                                {#                                <div class="login-title">#}
                                {#                                    <span><a href="{% url 'accounts:register' %}">还没账号？去注册</a></span>#}
                                {#                                </div>#}
                            </div>

                        </form>
                    </div>
                </div>
                {#                    </div>#}
                {#                </div>#}
            </div>
        </div>


    </main>
    <script>
        $("#button1").click(function () {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                    "user": $("#user").val(),
                    "pwd": $("#pwd").val(),
                    {#"email":$("")#}
                    "valid_code": $("#valid_code").val(),
                },
                success: function (data) {
                    {#alert(data)#}
                    var login_response = JSON.parse(data)
                    console.log(login_response);
                    if (login_response.user) {//成功

                        location.href = '{% url 'accounts:index' %}';

                    } else {
                        //失败
                        $(".error").html(login_response.error_msg).css("color", "red")
                        setTimeout(function () {
                            $(".error").html("")
                        }, 1000)

                    }
                },
            })
        })

        $("#valid_img").click(function () {
            $(this)[0].src += "?"
        })

        /*jigsaw.init(document.getElementById('captcha'), function () {
            flag = true;
            document.getElementById('msg').innerHTML = '登录成功！'
        })*/

    </script>
{% endblock %}

